/*
 * @Author: ray
 * @Date:   2019-06-06 10:46:48
 * @Last Modified by:   ray
 * @Last Modified time: 2019-06-11 15:01:34
 */
/**
 * ZenCheckbox description
 * @param {object} props [description]
 labelName：lable field name,can be component
 checkName：the value check or not
 name：checkbox name variable 
 formData：form data
 callBackList:callBackList to use in labelName component
 listClass：li css  className
 labelClass：label className
 inputClass：input className
 extraData: data to pass
 @todo: add type for recognize case that checked by props item field name
 * @example 
 const checkboxList = [
     {
         label: "吃饭",
         value: false,
         isDisabled: true
     },
     {
         label: "喝水",
         value: false
     },
     {
         label: "饮料",
         value: "true"
     }
 ];

 React.useEffect(() => {
     updateFormData({ test2: 9 ,test3:checkboxList});
 }, []);
 <ZenCheckbox formData={formData}   name="test3" change={handleChange}  />

 */
import "./ZenCheckbox.css";
export default function ZenCheckbox(props) {
	let {
		formData,
		name,
		labelName,
		checkName,
		checkboxList,
		listClass,
		change,
		labelClass,
		inputClass,
		checkboxCallback,
		singleMode,
		callBackList,
		extraData
	} = props;
	labelName = labelName || "label";
	checkName = checkName || "value";
	change = change || function() {};
	let scopeCheckboxList = Uts.copyObj(checkboxList);

	function checkboxChange(event, item, index) {
		let target = event.target;
		item[checkName] = target.checked;
		// formData[name][index][checkName]=target.checked;
		// console.log(formData[name]);
		// let currentValue=event.target.value;
		let newEvent = {
			target: {
				name: target.name /*,checkValidity:target.checkValidity*/
			}
		};
		newEvent.target.value = formData[name];
		change(newEvent, item, index, extraData);
		// change(event);
		// setTimeout(function(){
		// 	formData.test4=[1,2,3,4]
		// },3000);
	}

	function renderSingleCheckbox(item, index) {
		const LabelValue = item[labelName];
		return (
			<span
				className={Uts.sc([
					"ZenCheckbox-wrap zen_p-v-2 zen_il-bl zen_r-8",
					item[checkName] ? "ZenCheckbox_label-check" : "",
					listClass
				])}
				key={index}
			>
				<label
					className={Uts.sc([
						"zen_ps-re zen_il-bl zen_m-r-10",
						labelClass
					])}
				>
					<input
						type="checkbox"
						name={name}
						onChange={e => {
							checkboxChange(e, item, index);
						}}
						className={Uts.sc([
							"ZenCheckbox-checkbox zen_m-r-6",
							inputClass
						])}
						disabled={item.isDisabled}
						checked={item[checkName]}
					/>
					<i className="ZenCheckbox-icon" />
					{Uts.isFunction(LabelValue) ? (
						<LabelValue item={item} callBackList={callBackList} />
					) : (
						LabelValue
					)}
				</label>
			</span>
		);
	}

	return (
		<div>
			{formData[name] &&
				formData[name].map(function(item, index) {
					// console.log("formData[name]");
					return renderSingleCheckbox(item, index);
				})}
		</div>
	);
}
